<template>
  <d2-container>
    <div class="flex-1 ml-2 mt-3">
      <div class="flex-1 row-ac">
        <div class="row-ac">
          <div class="font-s-2 text-light-grey mr-1">店铺搜索</div>
          <div>
            <el-input size="mini" v-model="queryInfo.shop_name" placeholder="请输入店铺名称"></el-input>
          </div>
        </div>
        <div class="ml-2">
          <el-button size="mini" type="primary" @click="clickQuery">查询</el-button>
        </div>
      </div>

    </div>
    <div class="flex-1 ml-2 mt-5">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部商家" name="first">
          <el-table :data="merchantList" stripe border size="small">
            <el-table-column type="expand" width="33">
              <template slot-scope="props">
                <div class="flex-1 mx-3">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="会员">
                      <span>{{ props.row.user_name }}</span>
                    </el-form-item>
                    <el-form-item label="经营品类">
                      <span>{{ props.row.category_name }}</span>
                    </el-form-item>
                    <el-form-item label="保证金状态">
                      <el-tag v-if="props.row.is_margin == false" type="danger">未缴纳</el-tag>
                      <el-tag v-if="props.row.is_margin == true" type="success">已缴纳</el-tag>
                    </el-form-item>
                    <el-form-item label="保证金额">
                      <span>￥{{ props.row.margin_amount }}</span>
                    </el-form-item>
                    <el-form-item label="联系人">
                      <span>{{ props.row.card_name }}</span>
                    </el-form-item>
                    <el-form-item label="联系电话">
                      <span>{{ props.row.phone_number }}</span>
                    </el-form-item>
                    <el-form-item label="身份证号码">
                      <span>{{ props.row.card_number }}</span>
                    </el-form-item>
                    <el-form-item label="身份证正面">
                      <el-popover placement="right" trigger="hover"
                        v-if="props.row.cardID_front && props.row.cardID_front !== ''">
                        <el-image slot="reference" style="width: 30px; height: 30px" :src="props.row.cardID_front"
                          fit="cover" />
                        <el-image style="width: 220px; height: 220px" :src="props.row.cardID_front" fit="contain" />
                      </el-popover>
                    </el-form-item>
                    <el-form-item label="身份证反面">
                      <el-popover placement="right" trigger="hover"
                        v-if="props.row.cardID_contrary && props.row.cardID_contrary !== ''">
                        <el-image slot="reference" style="width: 30px; height: 30px" :src="props.row.cardID_contrary"
                          fit="cover" />
                        <el-image style="width: 220px; height: 220px" :src="props.row.cardID_contrary" fit="contain" />
                      </el-popover>
                    </el-form-item>
                  </el-form>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="序号" type="index" width="45" />
            <el-table-column align="center" label="店铺名称" prop="shop_name" width="110" />
            <el-table-column align="center" label="行业类目" prop="category_name" width="70" />
            <el-table-column align="center" label="店铺性质" prop="nature_name" width="70" />
            <el-table-column align="center" label="店铺类型" prop="is_paid" width="70">
              <template slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.types == 1" type="danger" effect="dark">非自营</el-tag>
                <el-tag size="mini" v-if="scope.row.types == 2" type="success" effect="dark">自营</el-tag>
                <el-tag size="mini" v-if="scope.row.types == 3" type="warning" effect="dark">合作</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="商家空间" prop="space_capacity" width="110">
              <template slot-scope="scope">
                <div class="">{{ scope.row.space_capacity | calculateFilter }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="提交时间" prop="created_time" width="110" />
            <el-table-column align="center" label="审核状态" prop="is_paid" width="70">
              <template slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.audit_status == 1" type="danger" effect="dark">未审核</el-tag>
                <el-tag size="mini" v-if="scope.row.audit_status == 2" type="success" effect="dark">审核通过</el-tag>
                <el-tag size="mini" v-if="scope.row.audit_status == 3" type="warning" effect="dark">未通过</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template slot-scope="scope">
                <el-button v-if="scope.row.audit_status == 1" size="mini"
                  @click="openPatch(scope.row.id)">审核</el-button>
                <el-button size="mini" @click="toDetail(scope.row.id)">商户详情</el-button>
                <el-button size="mini" v-if="scope.row.audit_status == 2" @click="toSpace(scope.row.user)">空间情况</el-button>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="auditStatus">
          <el-table :data="merchantList" stripe border size="small">
            <el-table-column type="expand" width="33">
              <template slot-scope="props">
                <div class="flex-1 mx-3">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="会员">
                      <span>{{ props.row.user_name }}</span>
                    </el-form-item>
                    <el-form-item label="经营品类">
                      <span>{{ props.row.category_name }}</span>
                    </el-form-item>
                    <el-form-item label="保证金状态">
                      <el-tag v-if="props.row.is_margin == false" type="danger">未缴纳</el-tag>
                      <el-tag v-if="props.row.is_margin == true" type="success">已缴纳</el-tag>
                    </el-form-item>
                    <el-form-item label="保证金额">
                      <span>￥{{ props.row.margin_amount }}</span>
                    </el-form-item>
                    <el-form-item label="联系人">
                      <span>{{ props.row.card_name }}</span>
                    </el-form-item>
                    <el-form-item label="联系电话">
                      <span>{{ props.row.phone_number }}</span>
                    </el-form-item>
                    <el-form-item label="身份证号码">
                      <span>{{ props.row.card_number }}</span>
                    </el-form-item>
                    <el-form-item label="身份证正面">
                      <el-popover placement="right" trigger="hover"
                        v-if="props.row.cardID_front && props.row.cardID_front !== ''">
                        <el-image slot="reference" style="width: 30px; height: 30px" :src="props.row.cardID_front"
                          fit="cover" />
                        <el-image style="width: 220px; height: 220px" :src="props.row.cardID_front" fit="contain" />
                      </el-popover>
                    </el-form-item>
                    <el-form-item label="身份证反面">
                      <el-popover placement="right" trigger="hover"
                        v-if="props.row.cardID_contrary && props.row.cardID_contrary !== ''">
                        <el-image slot="reference" style="width: 30px; height: 30px" :src="props.row.cardID_contrary"
                          fit="cover" />
                        <el-image style="width: 220px; height: 220px" :src="props.row.cardID_contrary" fit="contain" />
                      </el-popover>
                    </el-form-item>
                  </el-form>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="序号" type="index" width="45" />
            <el-table-column align="center" label="店铺名称" prop="shop_name" width="70" />
            <el-table-column align="center" label="联系人" prop="card_name" width="70" />
            <el-table-column align="center" label="联系电话" prop="phone_number" width="70" />
            <el-table-column align="center" label="申请类目" prop="category_name" width="70" />
            <el-table-column align="center" label="店铺性质" prop="nature_name" width="70" />
            <el-table-column align="center" label="店铺类型" prop="is_paid" width="70">
              <template slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.types == 1" type="danger" effect="dark">非自营</el-tag>
                <el-tag size="mini" v-if="scope.row.types == 2" type="success" effect="dark">自营</el-tag>
                <el-tag size="mini" v-if="scope.row.types == 3" type="warning" effect="dark">合作</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="提交时间" prop="created_time" width="110" />
            <el-table-column align="center" label="审核状态" prop="is_paid" width="70">
              <template slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.audit_status == 1" type="danger" effect="dark">未审核</el-tag>
                <el-tag size="mini" v-if="scope.row.audit_status == 2" type="success" effect="dark">审核通过</el-tag>
                <el-tag size="mini" v-if="scope.row.audit_status == 3" type="warning" effect="dark">未通过</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template slot-scope="scope">
                <el-button v-if="scope.row.audit_status == 1" size="mini"
                  @click="openPatch(scope.row.id)">审核</el-button>
                <el-button size="mini" @click="toDetail(scope.row.id)">商户详情</el-button>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="未通过" name="auditFail">
          <el-table :data="merchantList" stripe border size="small">
            <el-table-column type="expand" width="33">
              <template slot-scope="props">
                <div class="flex-1 mx-3">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="会员">
                      <span>{{ props.row.user_name }}</span>
                    </el-form-item>
                    <el-form-item label="经营品类">
                      <span>{{ props.row.category_name }}</span>
                    </el-form-item>
                    <el-form-item label="保证金状态">
                      <el-tag v-if="props.row.is_margin == false" type="danger">未缴纳</el-tag>
                      <el-tag v-if="props.row.is_margin == true" type="success">已缴纳</el-tag>
                    </el-form-item>
                    <el-form-item label="保证金额">
                      <span>￥{{ props.row.margin_amount }}</span>
                    </el-form-item>
                    <el-form-item label="联系人">
                      <span>{{ props.row.card_name }}</span>
                    </el-form-item>
                    <el-form-item label="联系电话">
                      <span>{{ props.row.phone_number }}</span>
                    </el-form-item>
                    <el-form-item label="身份证号码">
                      <span>{{ props.row.card_number }}</span>
                    </el-form-item>
                    <el-form-item label="身份证正面">
                      <el-popover placement="right" trigger="hover"
                        v-if="props.row.cardID_front && props.row.cardID_front !== ''">
                        <el-image slot="reference" style="width: 30px; height: 30px" :src="props.row.cardID_front"
                          fit="cover" />
                        <el-image style="width: 220px; height: 220px" :src="props.row.cardID_front" fit="contain" />
                      </el-popover>
                    </el-form-item>
                    <el-form-item label="身份证反面">
                      <el-popover placement="right" trigger="hover"
                        v-if="props.row.cardID_contrary && props.row.cardID_contrary !== ''">
                        <el-image slot="reference" style="width: 30px; height: 30px" :src="props.row.cardID_contrary"
                          fit="cover" />
                        <el-image style="width: 220px; height: 220px" :src="props.row.cardID_contrary" fit="contain" />
                      </el-popover>
                    </el-form-item>
                  </el-form>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="序号" type="index" width="45" />
            <el-table-column align="center" label="店铺名称" prop="shop_name" width="70" />
            <el-table-column align="center" label="联系人" prop="card_name" width="70" />
            <el-table-column align="center" label="联系电话" prop="phone_number" width="70" />
            <el-table-column align="center" label="申请类目" prop="category_name" width="70" />
            <el-table-column align="center" label="店铺性质" prop="nature_name" width="70" />
            <el-table-column align="center" label="店铺类型" prop="is_paid" width="70">
              <template slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.types == 1" type="danger" effect="dark">非自营</el-tag>
                <el-tag size="mini" v-if="scope.row.types == 2" type="success" effect="dark">自营</el-tag>
                <el-tag size="mini" v-if="scope.row.types == 3" type="warning" effect="dark">合作</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="提交时间" prop="created_time" width="110" />
            <el-table-column align="center" label="审核状态" prop="is_paid" width="70">
              <template slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.audit_status == 1" type="danger" effect="dark">未审核</el-tag>
                <el-tag size="mini" v-if="scope.row.audit_status == 2" type="success" effect="dark">审核通过</el-tag>
                <el-tag size="mini" v-if="scope.row.audit_status == 3" type="warning" effect="dark">未通过</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template slot-scope="scope">
                <el-button v-if="scope.row.audit_status == 1" size="mini"
                  @click="openPatch(scope.row.id)">审核</el-button>
                <el-button size="mini" @click="toDetail(scope.row.id)">商户详情</el-button>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="flex-1 mt-3">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.page" layout="total, prev, pager, next" :total="merchantTotal">
      </el-pagination>
    </div>
    <div class="mt-1"><el-button type="info" size="mini" @click="handleDownload">下载数据</el-button></div>
    <el-dialog :visible.sync="dialogAuditVisible" width="50%" title="审核描述">
      <el-form :model="auditStatus" ref="form" label-width="80px">
        <el-form-item label="内容" prop="application_describe">
          <div style="width: 80%;">
            <el-input type="textarea" rows="4" v-model="auditStatus.application_describe"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAuditVisible = false">取 消</el-button>
        <el-button type="primary" @click="patchForm">保存</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
  import {
    exportExcelUrl
  } from '@/utils/interface'
  import {
    merchantListUrl,
    merchantPatchUrl
  } from "@/utils/merchant"
  import {
    patch
  } from '@/utils/request'
  import {
    calculateFileSize
  } from '@/utils/utils'
  export default {
    data() {
      return {
        queryInfo: {
          shop_name: '',
          category_id: '',
          nature_id: '',
          application_status: '',
          audit_status: '',
          page: 1,
          page_size: 10
        },
        auditStatus: {
          audit_status: '',
          application_describe: ''
        },
        dialogAuditVisible: false,
        merchantList: [],
        merchantTotal: 1,
        activeName: 'first',
        getDate: '',
        excel_name: '商家资料'
      }
    },
    filters: {
      calculateFilter(value) {
        if (value === null || value === undefined) {
          return null;
        }
        if (value < 1024) {
          return `${value}B`;
        } else if (value < 1024 * 1024) {
          return `${(value / 1024).toFixed(2)}KB`;
        } else if (value < 1024 * 1024 * 1024) {
          return `${(value / (1024 * 1024)).toFixed(2)}MB`;
        } else {
          return `${(value / (1024 * 1024 * 1024)).toFixed(2)}GB`;
        }
      },
    },
    created() {
      this.getMerchantList()
    },
    methods: {
      handleClick(tab, event) {
        if (tab.paneName == 'first') {
          this.queryInfo = {}
          this.getMerchantList()
          this.excel_name = '全部商家'
        } else if (tab.paneName == 'auditStatus') {
          this.queryInfo.audit_status = 1
          this.queryInfo.application_status = ''
          this.getMerchantList()
          this.excel_name = '待审核商家'
        } else if (tab.paneName == 'auditFail') {
          this.queryInfo.audit_status = 3
          this.queryInfo.application_status = ''
          this.getMerchantList()
          this.excel_name = '未通过商家'
        }
      },
      getMerchantList() {
        this.$get(merchantListUrl, this.queryInfo).then(res => {
          if (res.data.code == 200) {
            this.merchantList = res.data.data.list
            this.merchantTotal = res.data.data.total
          }
        })
      },
      handleDownload() {
        const params = {
          shop_name: this.queryInfo.shop_name,
          category_id: this.queryInfo.category_id,
          nature_id: this.queryInfo.nature_id,
          application_status: this.queryInfo.application_status,
          audit_status: this.queryInfo.audit_status
        };
        this.$post('/admin/merchant-export-excel/', params, {
            responseType: 'blob'
          })
          .then(response => {
            const url = window.URL.createObjectURL(new Blob([response.data]))
            const link = document.createElement('a')
            link.href = url
            link.setAttribute('download', this.excel_name + '.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          })
          .catch(error => {
            console.error(error);
          });
      },
      // 分页页码显示条数
      handleSizeChange(newSize) {
        // 把每页显示多少数据重新赋值
        this.queryInfo.page_size = newSize
        this.getMerchantList()
      },
      // 翻页事件
      handleCurrentChange(newPage) {
        this.queryInfo.page = newPage
        this.getMerchantList()
      },
      clickQuery() {
        this.excel_name =  this.queryInfo.shop_name
        this.getMerchantList()
      },
      openPatch(merchantId) {
        this.$confirm('该店铺是否通过审核?', '提示', {
          confirmButtonText: '通过',
          cancelButtonText: '拒绝',
          type: 'warning'
        }).then(() => {
          this.auditStatus.audit_status = 2
          patch(merchantPatchUrl + merchantId + '/', this.auditStatus).then(res => {
            this.getMerchantList()
            this.$message({
              type: 'success',
              message: '审核成功'
            });
          })
        }).catch(() => {
          this.merchantId = merchantId
          this.dialogAuditVisible = true
        });
      },
      patchForm() {
        this.auditStatus.audit_status = 3
        patch(merchantPatchUrl + this.merchantId + '/', this.auditStatus).then(res => {
          this.dialogAuditVisible = false,
            this.getMerchantList()
          this.$message({
            type: 'success',
            message: '审核成功'
          });
        })
      },
      toDetail(merchantId) {
        this.$router.push({
          path: '/merchant/merchantDetail',
          query: {
            merchantId: merchantId // 添加第二个参数
          }
        })
      },
      toSpace(userId) {
        this.$router.push({
          path: 'merchant/merchantSpace',
          query: {
            userId: userId // 添加第二个参数
          }
        })
      }
    }
  }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 30%;
  }
</style>
